<template>
  <view class="shouye">
    <dao :left="false" :height="50" />
    <view class="content">
      <view class="tt">
        <uni-data-picker :clear-icon="false"
         v-slot:default="{ data, error }" placeholder="请选择店铺" 
         popup-title="请选择店铺"
          :localdata="data.dataTree" v-model="classes"
           @change="onchanges" @nodeclick="onnodeclick"
          @popupopened="onpopupopened" @popupclosed="onpopupclosed">
          <view v-if="error" class="error">
            <text>{{ error }}</text>
          </view>
          <view v-else-if="data.length" class="selected">
            <text>{{ data[1].text }}</text>
            <uni-icons type="down" color="#fff" size="18"></uni-icons>
          </view>
          <view class="selected" v-else>
            <text>请选择店铺 </text>
            <uni-icons type="down" color="#fff" size="18"></uni-icons>
          </view>
        </uni-data-picker>
      </view>
      <movable-area style="height: calc(100% - 100rpx); width: 100%" class="bacc">
        <view class="box">
          <!-- <uni-card shadow="0px 0px 3px 1px rgba(0, 0, 0, 0.08)">
          <view class="zanwu">暂无设备</view>
        </uni-card> -->
          <!-- <uni-notice-bar show-icon scrollable text="检测到异常事件！" /> -->
          <view class="line" style="padding-top: 10rpx;box-sizing: border-box">
            <p class="titles">
              在线设备
              <uni-badge class="uni-badge-left-margin" :text="zhenData.Online?zhenData.Online.length:0" type="success" />
            </p>

            <scroll-view v-if="zhenData.Online" :scroll-y="true" class="scroll-Y hei">
             <view       v-for="(item, index) in zhenData.Online" :key="index"  @click="detail(item)">
              <mycs  v-show="zhenData.Online.length"
         
                :value="60"
                :continuous=item.ContinuousRunningtime
                :name="item.Name" :status="item.RunningStatus" :Duration="item.Duration"
                url="/static/便携寿司饭团机.png" :MealAllowance="item.TodayTotalMeals" />
             </view>
              <view class="xianyin" v-if="!zhenData.Online.length">
                <text style="color: #999">暂无设备</text>
              </view>
            </scroll-view>
          </view>

          <view class="line" style="padding-top: 30rpx;box-sizing: border-box">
            <p class="titles">
              离线设备
              <uni-badge class="uni-badge-left-margin" :text="zhenData.Offline?zhenData.Offline.length:0" type="info" />
            </p>
            <scroll-view v-if="zhenData.Offline" :scroll-y="true" class="scroll-Y">
              <!-- :value="item.Temperature" -->
        <view @click="detail(item)" v-for="(item, index) in zhenData.Offline" :key="index">
          <mycs 
               v-show="zhenData.Offline.length"  
                :name="item.Name" :Duration="item.Duration"
                :value="0"
                :continuous=item.ContinuousRunningtime
                 url="/static/便携寿司饭团机.png" :status="item.RunningStatus"
                :MealAllowance="item.TodayTotalMeals" :color="[
      [0.3, '#999'],
      [0.7, '#666'],
      [1, '#333'],
    ]" :zhicolor="'#666'" :bcolor="'#999'" />
        </view>


              <view class="xianyin" v-if="!zhenData.Offline.length">
                <text style="color: #999"> 暂无设备   </text>
              </view>
            </scroll-view>
          </view>
        </view>
        <movable-view @click="tiao" class="yinas" :inertia="true" :x="data.x" :y="data.y" direction="all"
          @change="onChange">
          <uni-icons type="plusempty" color="#fff" size="30"></uni-icons>
        </movable-view>
      </movable-area>
    </view>
    <uni-popup ref="popup" type="dialog">
      <view class="xuanz">
        <!-- <p style="text-align: center; margin-bottom: 30rpx">选择添加方式</p> -->

        <view class="zhn">
          <view style="display: flex; flex-direction: column; align-items: center">
            <view @click="shubiao('/subpkg/dati/index')" class="biaoshi">
              <uni-icons type="compose" color="#fff" ; size="30"></uni-icons>

              添加设备
            </view>

            <!-- <text>添加设备</text> -->
          </view>
          <view style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
            ">
            <view @click="erweima" class="biaoshi">
              <image style="width: 60rpx; height: 60rpx" src="../../static/wifi.png" mode="scaleToFill" />
              设备配网
            </view>
            <text></text>
          </view>
        </view>
        <!-- <button class="btn" @click="close">取消</button> -->
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import dao from "../conpments/daohang.vue";
import { getKemu, getKimg,sousuoPosition } from "../../api/login";
import { ref, reactive, onMounted, inject, computed,onBeforeMount } from "vue";
import { useCounterStore } from "../../stores/counter";
import mycs from "./exharts/index.vue";
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";




interface myin {
  Avatar: string;
  Name: string;
  RunningStatus: number;
  Temperature: number;
  TodayTotalMeals: number;
  Type: string;
  ContinuousRunningtime:number;
  Duration: number;
}
interface shoyeData {
  Offline: myin[];
  Online: myin[];
}
const mychat: any = inject("mychat");




const onChange = function (e: any) { };


onHide(()=>{
  // let page:any = getCurrentPages().pop();
  //           if (page == undefined || page == null) return;
  //                 page.onShow();

  
})
const data = reactive({
  x: 310,
  y: 460,

  dataTree: [
    {
      text: "广东省",
      value: "广东省",
      children: [
        {
          text: "广州市",
          value: "广州市",
        },
        {
          text: "深圳市",
          value: "深圳市",
        },
      ],
    },
    {
      text: "四川省",
      value: "四川省",
      children: [
        {
          text: "成都",
          value: "成都",
        },
        {
          text: "攀枝花市",
          value: "攀枝花市",
        },
      ],
    },
 
  ],
});

const zhenData = computed<shoyeData>(() => {
  return counter.shouData;
});



onMounted(()=>{

  mychat.sendSocketMessage(classes.value)
})
const detail=(e:any)=>{
  uni.navigateTo({
      url: `/subpkg/detail/index?id=${e.Id}`,
      success: function (res:any) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenerPage", {
          data: e,
        });
      },
    });
  
}
const onnodeclick = (e: any) => { };
const onpopupopened = (e: any) => { };
const onpopupclosed = (e: any) => { };
const onchanges = (e: any) => {

  let a = e.detail.value[e.detail.value.length - 1].value;

  mychat.sendSocketMessage(a)


  counter.indizhi(a);
};

const counter = useCounterStore();

// 一个计算属性 ref
const classes = computed(() => {
  return counter.dizhi;
});


const token = computed(() => {
  return counter.token;
});
interface img {
  src: string;
  ref: string;
}
interface swrperData {
  data: img[];
}
const swrperData: swrperData = reactive({
  data: [],
});

// 获取科目
const indexData: any = reactive({
  subject: null,
});

const popup = ref<HTMLFormElement | null>(null);
const open = () => {
  popup.value!.open();
};
/**
 * 点击取消按钮触发
 * @param {Object} done
 */
const close = () => {
  // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
  // ...
  popup.value!.close();
};

const tiao = (id: any) => {
  open();
};


const zhuan = (e: string) => {

  
  // onHide(){}
  onBeforeMount(()=>{
    console.log('隐藏了');
    
  })
  if (token.value) {
    uni.navigateTo({
      url: e,
      success: function (res: any) {
        close()
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenerPage");
      },
    });
  } else {
    uni.showToast({
      title: "请先登录！",
      icon: "error",
      duration: 1000,
    });

    setTimeout(() => {
      uni.switchTab({
        url: "../../pages/my/index",
      });
    }, 500);
  }
};
const shubiao = (e: string) => {
  zhuan(e);
};

const erweima = () => {
  // /subpkg/aeginpw / index;
  
  uni.navigateTo({
    url: "/subpkg/peiwang/index",
    success: function (res: any) {
      close()
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("acceptDataFromOpenerPage");
    },
  });

};





</script>


<style lang="scss" scoped>

.xianyin {
  width: 100%;
  height: 100%;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shouye {
  height: 100vh;
  background: linear-gradient(180deg,
      $uni-primary 0%,
      rgba(216, 237, 232, 0.43) 61.6%,
      rgba(217, 217, 217, 0) 100%);
}


.titles {
  margin: 0 15px;
  padding-bottom: 10rpx;
  font-size: 40rpx;
  color: #181818;
  border-bottom: 1px solid #ccc;
}

.bacc {
  // background: linear-gradient(to bottom, #3280fe, #fefefe, #fefefe, #fefefe);
}

::v-deep .selected-area {
  color: #000 !important;
}

::v-deep .input-value-border {
  border: 0;
}.line{height: 50%;}
::v-deep .input-split-line {
  color: #000;
}

.selected {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
}

.content {
  position: relative;
  border: 0;

  height: calc(100vh - 100rpx);
  .tt {
    font-size: 18px;
    padding: 0 20rpx 20px 20rpx;
    // background-color: #3280fe;
  }
}

.xuanz {
  width: 600rpx;
  border-radius: 10rpx;
  padding: 30rpx;
  background-color: #fff;

  .btn {
    width: 200rpx;
  }

  .zhn {
    display: flex;
    justify-content: space-around;

    .biaoshi {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 200rpx;
      color: #fff;
      font-size: 14px;
      border-radius: 50%;
      background-color: #21afff;
    }
  }
}

.yinas {
  width: 80rpx;
  height: 80rpx;
  display: flex;

  justify-content: center;
  align-items: center;
  color: #fff !important;
  border-radius: 50%;
  background: #21afff;
}

.swiper_item {
  height: 150px;

  .sw_image {
    width: 100%;
    height: 150px;
  }
}

.fenye1 {
  padding: 0 5px;
  display: flex;
  justify-content: space-between;

  .fenyue2 {
    display: flex;

    flex-direction: column;
    margin-top: 20px;

    .fenyue2_img {
      width: 128rpx;
      height: 140rpx;
    }
  }
}

.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}

.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}

.serwch {
  position: sticky;

  top: 0;
  z-index: 9999;
}

.baox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.box {
  overflow: hidden;
  height: 100%;
}

.zanwu {
  width: 100%;
  height: 220rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
  color: #030303;
}

.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}

.scroll-Y {
  // height: 37.5vh;
  min-height: 34vh;
  max-height: 37.5vh;
}

// .hei {
//   height: 560rpx;
// }
.tai {
  font-size: 24rpx;
  color: #777575;
}
</style>
